/*
 * @Author: zhangzhen
 * @Date: 2023-01-10 09:26:33
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-03-15 18:46:00
 *
 */
import React, {FC, useContext} from 'react';
import { Select, Slider, Button } from 'antd';
import styles from './styles.module.scss';
import {FormContext} from '../context';

const optionsOne = [
    {label: '一行一列', value: 1},
    {label: '一行二列', value: 2},
    {label: '一行三列', value: 3},
];

const optionsTwo = [
    {label: '同一行', value: 'horizontal'},
    {label: '单独一行', value: 'vertical'},
];

const FormLayout: FC<any> = () => {
    const {  
        setLayoutParams,
        layoutParams,
        setCurrentItem,
        currentItem,
        setFormConTextValue,
        formConTextValue,
       } = useContext(FormContext);
    const {colSpan, labelCol, layout} = layoutParams;



    return (
        <div className={styles.formLayoutBox}>
            {/* <div className={styles.formLayoutItem}>
                <span className={styles.itemName}>整体布局:</span>
                <span className={styles.itemSlider}>
                    <Select
                        options={optionsOne}
                        value={colSpan}
                        onChange={(value: 1 | 2 | 3) => {
                            setLayoutParams({layout, labelCol, colSpan: value});
                            if (value === 1) {
                                setLayoutParams({
                                    layout,
                                    colSpan: value,
                                    labelCol: 2,
                                });
                            } else if (value === 2) {
                                setLayoutParams({
                                    layout,
                                    colSpan: value,
                                    labelCol: 4,
                                });
                            } else if (value === 3) {
                                setLayoutParams({
                                    layout,
                                    colSpan: value,
                                    labelCol: 5,
                                });
                            }
                        }}
                    />
                </span>
            </div> */}
            {/* <div className={styles.formLayoutItem}>
                <div className={styles.itemName}>标签宽度:</div>
                <span className={styles.itemSlider}>
                    <Slider
                        defaultValue={2}
                        value={labelCol}
                        max={8}
                        min={2}
                        onChange={(value) => {
                            setLayoutParams({layout, colSpan, labelCol: value});

                        }}
                    />
                </span>
            </div> */}
            <div className={styles.formLayoutItem}>
                <div className={styles.itemName}>标签展示:</div>
                <span className={styles.itemSlider}>
                    <Select
                        options={optionsTwo}
                        value={layout}
                        onChange={(value: any) => {
                            if (value === 'vertical') {
                                setFormConTextValue(
                                    formConTextValue.map((item) => ({
                                        ...item,
                                        labelSpan: 32,
                                    })),
                                );
                            } else {
                                setFormConTextValue(
                                    formConTextValue.map((item) => ({
                                        ...item,
                                        labelSpan: 110,
                                    })),
                                );
                            }
                            setCurrentItem({
                                ...currentItem,
                                labelSpan: 110,
                            });
                            setLayoutParams({colSpan, labelCol, layout: value});

                        }}
                    />
                </span>
            </div>
        </div>
    );
};

export default FormLayout;
